<template>
  <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="120px"
      class="demo-ruleForm"
      :size="formSize"
      status-icon
  >
    <el-form-item label="接口名称" prop="name">
      <el-input v-model="ruleForm.name"/>
    </el-form-item>
    <el-form-item label="描述" prop="description">
      <el-input v-model="ruleForm.description" type="textarea"/>
    </el-form-item>
    <el-form-item label="url" prop="url">
      <el-input v-model="ruleForm.url"/>
    </el-form-item>
    <el-form-item label="请求参数" prop="requestParams">
      <el-input v-model="ruleForm.requestParams" type="textarea"/>
    </el-form-item>
    <el-form-item label="请求头" prop="requestHeader">
      <el-input v-model="ruleForm.requestHeader" type="textarea"/>
    </el-form-item>
    <el-form-item label="响应头" prop="responseHeader">
      <el-input v-model="ruleForm.responseHeader" type="textarea"/>
    </el-form-item>
    <el-form-item label="状态" prop="status">
      <el-input v-model="ruleForm.status"/>
    </el-form-item>
    <el-form-item label="方法" prop="method">
      <el-input v-model="ruleForm.method"/>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRef)">
        修改
      </el-button>
      <el-button @click="resetForm(ruleFormRef)">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import {onMounted, PropType, reactive, ref} from 'vue'
import type {FormInstance, FormRules} from 'element-plus'
import api from '../api/api'
import {defineProps} from 'vue';
import router from "@/router";

const props = defineProps({
  currentId: String, // 声明一个名为 receivedData 的 prop
});
const nameN = ref('');
const descriptionN = ref('');
const requestHeaderN = ref('');
const responseHeaderN = ref('');
const urlN = ref('');
const statusN = ref('');
const methodN = ref('');

onMounted(() => {
  console.log('idid', props.currentId)
  api.get('/api/interfaceInfo/get?id=' + props.currentId).then((response => {
    console.log(response)
    ruleForm.name = response.data.name
    ruleForm.description = response.data.description
    ruleForm.requestParams = response.data.requestParams
    ruleForm.requestHeader = response.data.requestHeader
    ruleForm.responseHeader = response.data.responseHeader
    ruleForm.url = response.data.url
    ruleForm.status = response.data.status
    ruleForm.method = response.data.method
  }))
})

interface RuleForm {
  name: string
  description: string
  requestParams: string
  requestHeader: string
  responseHeader: string
  url: string
  status: string
  method: string
}
const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
  name: "",
  description: "",
  requestParams: "",
  requestHeader: "",
  responseHeader: "",
  url: "",
  status: "",
  method: ""
})

const rules = reactive<FormRules<RuleForm>>({
  name: [
    {required: true, message: '请输入接口名称', trigger: 'blur'},
    {min: 3, max: 15, message: '长度应为3到15', trigger: 'blur'},
  ],
  description: [
    {required: true, message: '请输入接口详情', trigger: 'blur'},
  ],
  requestHeader: [
    {required: true, message: '请输入请求头', trigger: 'blur'},
  ],
  responseHeader: [
    {required: true, message: '请输入响应头', trigger: 'blur'},
  ],
  url: [
    {required: true, message: '请输入url', trigger: 'blur'},
  ],
  status: [
    {required: true, message: '请输入接口状态', trigger: 'blur'},
  ],
  method: [
    {required: true, message: '请输入接口方法', trigger: 'blur'},
  ]
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      let data = {
        "id": props.currentId,
        "description": ruleForm.description,
        "method": ruleForm.method,
        "name": ruleForm.name,
        "requestParams": ruleForm.requestParams,
        "requestHeader": ruleForm.requestHeader,
        "responseHeader": ruleForm.responseHeader,
        "status": ruleForm.status,
        "url": ruleForm.url
      }
      console.log('submit!')
      api.post('/api/interfaceInfo/update', data).then((response => {
        console.log(response.data)
        location.reload();
      }))
    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

const options = Array.from({length: 10000}).map((_, idx) => ({
  value: `${idx + 1}`,
  label: `${idx + 1}`,
}))
</script>
